<template>
  <div class="p-3 d-flex flex-column my-container">
    <div class="shadow rounded-lg d-flex flex-column">
      <div class="d-flex flex-column">
        <div class="p-3">
          <div class="d-flex flex-row flex-wrap over-hidden">
            <div class="col-center mr-4">
              <el-button type="success" @click="returnUrl()">返回</el-button>
              <el-button type="primary" @click="output()">导出Excel表</el-button>
            </div>
            <div class="col-center mr-4">
              <span class="font-weight-bold">报表名称：</span>
              <span>{{ tabList.reportName }}</span>
            </div>
            <div class="col-center mr-4">
              <span class="font-weight-bold">操作人：</span>
              <span>{{ tabList.operationName }}</span>
            </div>
            <div class="col-center mr-4">
              <span class="font-weight-bold">操作类型：</span>
              <span>{{ tabList.operationType }}</span>
            </div>
            <div class="col-center mr-4">
              <span class="font-weight-bold">设备信息：</span>
              <el-tooltip class="item" effect="dark" :content="tabList.deviceInfo" placement="bottom">
                <span>{{ tabList.deviceNameSlice }}</span>
              </el-tooltip>
            </div>
            <div class="col-center mr-4">
              <span class="font-weight-bold">起始时间：</span>
              <span>{{ tabList.startTime }} - {{ tabList.endTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="col d-flex over-auto">
        <el-table v-loading="loading" border :data="tableData" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="50" align="center"/>
          <el-table-column prop="reportCode" label="报表编码" align="center"/>
          <el-table-column prop="deviceCode" label="设备编码" align="center"/>
          <el-table-column prop="deviceName" label="设备名称" align="center"/>
          <el-table-column prop="deviceDes" label="设备描述" align="center"/>
          <el-table-column prop="deviceStation" label="设备位置" align="center"/>
          <el-table-column prop="operationName" label="操作指令" align="center">
            <!--            <template #default="{ row }">-->
            <!--              <span v-if="row.status == 1" style="color: #07c160">正常</span>-->
            <!--              <span v-else>停用</span>-->
            <!--            </template>-->
          </el-table-column>
          <el-table-column prop="operationRes" label="操作结果" align="center"></el-table-column>
          <el-table-column prop="createTime" label="上报时间" align="center"/>
<!--          <el-table-column label="时间" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.createTime }}-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="tablePage.pageIndex" :limit.sync="tablePage.pageSize"
                  @pagination="pagination"/>
    </div>

    <!-- 封装操作后弹框 -->
    <global-message v-if="isGlobalMessageShow" @receive="receive" :message="message"/>
  </div>
</template>

<script>
  import {
    queryOneRecordRule,
    queryPageDevicePtOperationRecord
  } from "@/api/reportStatistics/index"
  import ycDialog from "@/components/pageDialog"

  export default {
    data() {
      return {
        reportCode: "",
        isGlobalMessageShow: false,
        loading: false,
        message: "",
        tabList: {},
        tableData: [],
        count: 0,
        tablePage: {
          pageIndex: 1,
          pageSize: 20
        }
      }
    },
    components: {
      ycDialog
    },
    created() {
      this.reportCode = this.$route.query.reportCode || ""
    },
    mounted() {
      this.queryOneRecordRule()
      this.queryPageOpRecord()
    },
    methods: {
      // 查询报表基本信息
      queryOneRecordRule() {
        queryOneRecordRule({ reportCode: this.reportCode, reportType: "2" }).then(res => {
          if (res.status == 200) {
            this.tabList = res.object
            if (this.tabList.deviceInfo.length > 20) {
              this.tabList.deviceNameSlice = this.tabList.deviceInfo.slice(0,20) + '...'
            } else {
              this.tabList.deviceNameSlice = this.tabList.deviceInfo
            }
          }
        })
      },

      /**
       * 获取表格方法
       */
      async queryPageOpRecord(pageIndex = 1, pageSize = 20) {
        this.loading = true
        const { status, object } = await queryPageDevicePtOperationRecord({
          pageIndex,
          pageSize,
          reportCode: this.reportCode
        })
        if (status == 200) {
          this.tableData = object.data
          this.count = object.count
          this.loading = false
        }
      },

      pagination(pageItem) {
        this.queryPageOpRecord(pageItem.page, pageItem.limit)
      },
      returnUrl() {
        this.$router.go(-1)
      },
      output() {
        if(process.env.NODE_ENV === "development") {
          window.location.href = `http://192.168.2.79:8082/breport/exportExcelOperationRecord?reportType=2&reportCode=${this.reportCode}`
        } else {
          window.location.href = `${process.env.VUE_APP_BASE_API}/breport/exportExcelOperationRecord?reportType=2&reportCode=${this.reportCode}`
        }
      },
      /**
       * 刷新
       */
      refresh() {
        this.searchReportForms = {}
        this.getAccountData()
      },
      /**
       * globalMessage的知道按钮的方法
       * */
      receive() {
        this.isGlobalMessageShow = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .status {
    display: inline-block;
    padding: 0 10px;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      margin-left: 20px;
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .content {
    height: 600px;

    .drawer-title {
      font-weight: 400;
      font-size: 24px;
      color: #000000;
      text-align: center;
      padding: 36px 0;
    }

    .form {
      padding: 0 10px;
    }
  }

  .footer {
    height: 360px;
    display: flex;
    align-items: flex-end;
    // justify-content: st-end;
    padding: 5px 20px;
  }
</style>
